<template>
    <div class="recommend" @scroll.passive="lazyData($event)">
        <swiper-vue v-show="flat"></swiper-vue>
        <recom-tab-vue v-show="flat" :tabObj="item" v-for="(item, index) in tabListArr" :key="index"></recom-tab-vue>
        <loading v-show="!flat"></loading>
    </div>
</template>

<script>
import { homeRecommend } from "../../request/index";
import recomTabVue from "../../components/recomTab.vue";
import swiperVue from "../../components/swiper.vue";
import loading from "@/components/loading.vue";
export default {
    components: {
        swiperVue,
        recomTabVue,
        loading,
    },
    data() {
        return {
            tabListArr: [],
            num: 1,
            timer: null,
            flat: false,
        };
    },

    methods: {
        setTab() {
            homeRecommend({ seed: 1, drag: 1, page_num: this.num })
                .then((data) => {
                    data.data.list.map((item) => {
                        this.tabListArr.push(item);
                        return item;
                    });
                    return this.tabListArr;
                })
                .then((content) => {
                    this.flat = true;
                });
        },
        addNum() {
            this.num++;
        },
        lazyData(e) {
            if (e.srcElement.scrollTop > e.srcElement.scrollHeight / 2) {
                if (this.timer == null) {
                    this.timer = setTimeout(() => {
                        if (this.num < 3) {
                            this.num++;
                            homeRecommend({ seed: 1, drag: 1, page_num: this.num }).then((data) => {
                                data.data.list.map((item) => {
                                    this.tabListArr.push(item);
                                    return item;
                                });
                            });
                        }
                        this.timer = null;
                    }, 3000);
                }
            }
        },
    },
    mounted() {
        this.setTab();
    },
};
</script>

<style>
.recommend {
    height: 100vh;
    overflow: scroll;
}
</style>
